<template>
  <transition name="slide-fade">
    <div>
      <div class="warp"></div>
      <div class="box" v-show="isShow">
        <p class="close" @click="closeClk">X</p>
        <h1 class="title">
          <slot name="title"></slot>
        </h1>
        <h2 class="content">
          <slot name="content"></slot>
        </h2>
        <div class="btnWarp">
          <slot name="btn"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: ["isShow"],
  data() {
    return {};
  },
  methods: {
    closeClk() {
      this.$emit("update:isShow", false);
    },
  },
};
</script>

<style scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.warp {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

.box {
  width: 300px;
  height: 300px;
  position: fixed;
  top: 35%;
  left: 40%;
  background: white;
  position: relative;
}

.close {
  position: absolute;
  right: 6px;
  top: -13px;
  cursor: pointer;
}

.btnWarp {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
</style>
